<template>
	<view>
		<view v-if="store.userInfo" class="cc-bg-ef5 padding-h30" >
			<view class="cc-rows cc-flex-vcenter" style="padding: 80rpx 0;">
				<fui-avatar src="../../static/image/tx.png" width="140" height="140"/>
				<view class="cc-columns cc-lineHeight-60 margin-l20" >
					<text class="cc-size-38 cc-txt-bold">{{store.userInfo.account}}</text>
					<text class="cc-size-26 cc-color-999">ID:{{store.userInfo.phone}}</text>
				</view>
			</view>
		</view>
		<view class="cc-bg-ef5 padding-h30 cc-relative" v-else>
			<view class="cc-rows cc-flex-vcenter" style="padding: 80rpx 0;" @click="goLogin">
				<fui-avatar text="刘" background="#FFB703" width="140" height="140"/>
				<text class="cc-size-36" style="margin-left: 30rpx;" @click="gotoLogin">注册/登录</text>
			</view>
		</view>
		<view class="cc-absolute col-100 " style="top: 17.7%;">
			<view class="col-90 padding-30 cc-rows cc-flex-vcenter" style="margin: auto;border-radius: 16rpx 16rpx 0 0;background-color: #FFF7EA;">
				<fui-icon name="help" :size="40" color="#F0B458"/>
				<text class="cc-color-warning margin-l20">账户接入点数: {{store.userInfo.points}}</text>
				<fui-bubble-box :items="items" direction="top" position="absolute" :show="show4" zIndex="99" :showLine="false"
					@click="itemClick($event,4)" @close="onClose(4)" width="400" size="26">
					<fui-tag text="购买点数" @click="bubble(4)" type="warning" theme="light" marginLeft="30"/>
				</fui-bubble-box>
			</view>
			<view class="cc-bg-white border-radius-16 padding-20" style="margin: 30rpx 32rpx 0 32rpx;">
				<view class="cc-txt-bold" style="margin-bottom: 10rpx;">账号信息</view>
				<view class="cc-bg-white border-radius-20">
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">公司/个人主体名称</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.subject_name}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">联系人</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.person}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">联系电话</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.phone}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">省市区</text>
						<text class="cc-size-28" style="margin-top:10rpx;">
							{{store.userInfo.province}}{{store.userInfo.city}}{{store.userInfo.district}}
						</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">联系地址</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.address}}</text>
					</view>
				</view>
			</view>
			<view class="cc-bg-white border-radius-16 padding-20" style="margin: 30rpx 32rpx;">
				<view class="cc-txt-bold" style="margin-bottom: 10rpx;">登录信息</view>
				<view class="cc-bg-white border-radius-20">
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">最后一次登录时间</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.last_login_time}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">最后一次登录IP</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.last_login_ip}}</text>
					</view>
					<view class="cc-rows cc-space-between">
						<text class="cc-color-888 cc-size-28" style="margin:10rpx 40rpx 20rpx 0;">注册IP</text>
						<text class="cc-size-28" style="margin-top:10rpx;">{{store.userInfo.register_ip}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref} from 'vue'
	import { useInfoStore } from '@/stores/info'
	export default {
		setup(){
			const userInfo = ref('')
			const visible = ref(false)
			const store = useInfoStore()
			const member = ref({})
			const show4 = ref(false)
			const items = ref([{text:'接入点代表您可以接入开放平台的设备数量，如10个接入点，表示可以接入10台设备到开放平台'}])
			return {
				store,member,visible,items,show4
			}
		},
		methods: {
			gotoLogin(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			loginOut() {
				this.store.logout()
				this.show = false
				console.log(getCurrentPages())
				uni.navigateBack()
			},
			itemClick(e, type) {
				console.log(e)
				this.onClose(type)
			},
			onClose(type) {
				switch (type) {
					case 1:
						this.show1 = false
						break;
					case 2:
						this.show2 = false
						break;
					case 3:
						this.show3 = false
						break;
					case 4:
						this.show4 = false
						break;
					case 5:
						this.show5 = false
						break;
					case 6:
						this.show6 = false
						break;
					default:
						break;
				}
			},
			bubble(type) {
				switch (type) {
					case 1:
						this.show1 = true
						break;
					case 2:
						this.show2 = true
						break;
					case 3:
						this.show3 = true
						break;
					case 4:
						this.show4 = true
						break;
					case 5:
						this.show5 = true
						break;
					case 6:
						this.show6 = true
						break;
					default:
						break;
				}
			},
		}
	}
</script>

<style>
.cc-bg-ef5{ background-image: linear-gradient(to right, #D6FEF5 , #F2F3EB);height: 370rpx;}
</style>
